<template>
  <view class="helang-tab-bar">
    <view class="placeholder" v-if="props.fixedBottom"></view>
    <view class="bar h-flex-x h-flex-5" :class="{ fixed: props.fixedBottom }">
      <view
        class="item"
        v-for="(item, index) in state.tabList"
        :key="index"
        :class="{
          active: currentRoute == index,
          recover: state.prevIndex == index
        }"
        @tap="change(index)"
      >
        <view>
          <view class="h-flex-x h-flex-center">
            <u-icon :name="item.icon" size="60rpx" color="#dbd9f7"></u-icon>
          </view>
          <view class="h-flex-x h-flex-center">
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { default as useCountStore } from '@/store/modules/countStore'

// 获取自定义的store
const store = useCountStore()

// 取需要的 state
const { currentRoute } = storeToRefs(store)
const props = defineProps({
  fixedBottom: {
    type: Boolean,
    default: true
  }
})
const state = reactive({
  prevIndex: -1,
  current: 0,
  tabList: [
    {
      icon: 'home',
      text: '首页',
      path: '/pages/index/index'
    },
    {
      icon: 'moments',
      text: '流转中心',
      path: '/pages/market/index'
    },
    {
      icon: 'account-fill',
      text: '我的',
      path: '/pages/my/index'
    }
  ]
})

const change = (index: number) => {
  if (currentRoute.value === index) return

  state.prevIndex = state.current
  store.$patch((v) => {
    v.currentRoute = index
  })
}
</script>

<style lang="scss" scoped>
@import './helang-flex.scss';

.helang-tab-bar {
  font-size: 28rpx;

  view {
    box-sizing: border-box;
  }
  // 点位符
  .placeholder {
    height: 100rpx;
    box-sizing: content-box;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
  }
  // 栏
  .bar {
    height: 150rpx;
    box-sizing: content-box;
    background-color: #231f30;
    position: relative;

    // 固定底部定位
    &.fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 750rpx;
      z-index: 9999;
    }
  }
}
.helang-tab-bar {
  .item {
    height: 100rpx;
    width: 30%;
    position: relative;
    overflow: hidden;

    > view {
      height: 200%;

      > view {
        height: 50%;
        color: #fff;
        font-size: 35rpx;
        font-weight: 600;
      }
    }

    &.active {
      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 90rpx;
        height: 90rpx;
        box-sizing: border-box;
        border-color: #fff;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        top: 5rpx;
        left: 50%;
        margin-left: -45rpx;

        z-index: 1;
        animation: scale 0.3s ease 0s 1 normal;
        animation-fill-mode: forwards;
      }
      &::after {
        content: '';
        display: block;
        background-color: #fff;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        position: absolute;
        bottom: 3px;
        left: 50%;
        margin-left: -2px;
        z-index: 2;
        opacity: 0;

        animation: fide-in 0.5s ease 0.3s 1 normal;
        animation-fill-mode: forwards;
      }

      > view {
        animation: translate 0.4s ease 0.3s 1 normal;
        // transform:translateY(-100rpx);
        animation-fill-mode: forwards;
      }
    }

    &.recover {
      > view {
        animation: recover 0.3s ease 0s 1 normal;
      }
    }
  }
}

// 恢复默认
@keyframes recover {
  from {
    transform: translateY(-100rpx);
  }
  to {
    transform: translateY(0);
  }
}
// 转换移动
@keyframes translate {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100rpx);
  }
}
// 圆圈缩放
@keyframes scale {
  0% {
    transform: scale(0, 0);
    opacity: 0;
    border-width: 2px;
  }
  50% {
    opacity: 0.5;
    border-width: 5px;
  }
  100% {
    transform: scale(0.95, 0.95);
    opacity: 0;
    border-width: 0px;
  }
}

// 淡入
@keyframes fide-in {
  from {
    transform: scale(0, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}
</style>
